<template>
  <!--待支付-->
  <div class="WaitPay" v-show="isShowHtml" >
    <ul  v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-immediate-check="false"
         infinite-scroll-distance="10" class="annalBox" v-if="waitList.data.length>0">
      <li v-for="(item,index) in waitList.data">
        <p>订单号{{item.id}}<span>货款编号{{item.loan_number}}</span></p>
        <p><i>{{item.name}}<span>{{item.created_at.slice(2,10)}}</span></i><b>{{item.fees_amount}}</b></p>
        <!--<p>描述:{{item.fees_amount}}</p>-->
        <div class="annalBut">
          <span>支付</span>
        </div>

      </li>
    </ul>
    <no-record v-else></no-record>
    <loading v-if="isLoading"></loading>

  </div>
</template>

<script>
  import NoRecord from './NoRecord'
  import loading from './../common/Loading'
  export default {
    name: 'WaitPay',
    components: {
      NoRecord,
      loading
    },
    data(){
      return{
        isShowHtml:false,
        isLoading:false,
        waitList:{
          data:[],
          last_page:'1',
          current_page:'1'
        }
      }
    },
    created(){
      this.$indicator.open()
    },
    mounted(){
      this.$api.getUserWaitPay().then((res)=>{
        this.waitList =res.data;
        this.$indicator.close();
        this.isShowHtml=true;
      }).catch(()=>{
        this.$indicator.close();
        this.isShowHtml=true;
      })
    },
    methods:{
      loadMore() {
        if (this.waitList.current_page<this.waitList.last_page) {
          this.isLoading = true;
          this.$api.getUserWaitPay({page:this.waitList.current_page+1}).then((res)=>{
            this.isLoading = false;
            this.waitList.current_page = res.data.current_page;
            this.waitList.data=this.waitList.data.concat(res.data.data);
          }).catch(()=>{
            this.isLoading = false;
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .WaitPay{
    width: 100%;
    height: 100%;
    .annalBox{
      width: 100%;
      li{
        padding:30px;
        margin-bottom: 20px;
        background:rgba(255,255,255,1);
        p{
          font-size:28px;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          width: 100%;
          line-height: 50px;
          i{
            display: inline-block;
            width: 70%;
            /*width: 72%;*/
            span{
              padding-left: 10px;
              font-size:24px;
              color:rgba(153,153,153,1);
              white-space: nowrap;
            }

          }
          b{
            float: right;
            font-size:36px;
            font-weight:bold;
            color:rgba(51,51,51,1);
            width: 30%;
          }
        }
        p:nth-child(1){
          font-size:24px;
          color:rgba(153,153,153,1);
          span{
            float: right;
          }
        }
        P:nth-child(3){
          font-size:24px;
          color:rgba(51,51,51,1);
        }
      }
      .annalBut{
        width: 100%;
        text-align: right;
        span{
          display: inline-block;
          width:150px;
          border-radius:6px;
          text-align: center;
          font-size:26px;
          font-weight:400;
          line-height:65px;
          background:rgba(231,31,24,1);
          color:rgba(255,255,255,1);
          margin-top: 40px;
          margin-left: 20px;
        }
      }
    }
  }
</style>
